<template>
    <div>
        机构名称<input type="text" v-model="info.Name">
        特色服务<select v-model="info.Tese">
            <option value="">请选择</option>
            <option v-for="item in list1" :key="item.Tese" :value="item.Tese" >{{ item.Tese }}</option>
        </select>
        <input type="button" class="btn btn-success" value="查询" @click="getlist">
        <input type="button" value="批量发布" @click="StateAll" class="btn btn-info">
        <input type="button" value="批量导出" @click="ExportFn" class="btn btn-info">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="check"  @click="checkAll">
                    </td>
                    <td>机构名称</td>
                    <td>机构封面</td>
                    <td>特色服务</td>
                    <td>营业时间</td>
                    <td>机构地址</td>
                    <td>联系电话</td>
                    <td>机构状态</td>
                    <td>机构详情</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.Id">
                    <td>
                        <input type="checkbox" v-model="ids" :value="item.Id" @change="checkOne">
                    </td>
                    <td>{{ item.Name }}</td>
                    <td><img :src="item.Photo" alt="" width="100" height="100"></td>
                    <td>{{ item.Tese }}</td>
                    <td>{{ moment(item.DateTime).format('YYYY-MM-DD hh:mm:ss') }}</td>
                    <td>{{ item.Addr }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.State==0?'未发布':'已发布' }}</td>
                    <td>{{ item.Desc }}</td>
                    <td>
                        <input type="button" class="btn btn-danger" value="删除" @click="Del(item.Id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            <span>共<b>{{ data.totalCount }}</b>条</span>
            <span>每页<b>{{ info.pageSize }}</b>条</span>
            <span>共<b>{{ info.pageIndex }}</b>/<b>{{ data.totalCountPage }}页</b></span>
            <input type="button" value="首页" @click="goPage(1)">
            <input type="button" value="上一页" @click="goPage(info.pageIndex-1)">
            <span v-for="item in data.totalCountPage" :key="item.Id" @click="goPage(item)">    {{    item   
             }}  </span>
            <input type="button" value="下一页" @click="goPage(info.pageIndex+1)">
            <input type="button" value="尾页" @click="goPage(data.totalCountPage)">
            <input type="number" v-model="info.pageIndex">
            <input type="button" value="跳转" @click="goPage(info.pageIndex)">
            <select v-model="info.pageSize" @change="show">
                <option v-for="item in arr" :value="item"  >每页{{ item }}条</option>
            </select>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted} from 'vue'
import axios from 'axios';
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment'
const route=useRoute();
const router=useRouter();

let info:any=reactive({
    pageIndex:1,
    pageSize:2,
    Name:'',
    Tese:''
})

let data:any=reactive({
    list:[],
    totalCount:0,
    totalCountPage:0
})

let arr:any=ref([2,4,6,8]);

onMounted(()=>{
    getlist1();
    getlist();
})

let list1:any=ref([])
const getlist1=()=>{
    axios({
        url:'http://localhost:5130/api/Exams/GetTeseList',
        method:'get',
        params:list1
    })
    .then(res=>{
        list1.value=res.data;
    })
    .catch(err=>{
        console.log(err);
        
    })
}

let check:any=ref(false);
let ids:any=ref([])
const show=()=>{
    info.pageIndex=1;
    getlist();
}
const goPage=(num:any)=>{
    if(num<1)
{
    info.pageIndex=1;
    return;
}
if(num>data.totalCountPage)
{
    info.pageIndex=data.totalCountPage;
    return;
}
info.pageIndex=num;
getlist();
}
const checkAll=()=>{
    check.value=!check.value
    if(check.value==true)
{
    ids.value=data.list.map((item:any)=>{
        return item.Id;
    })
}
else 
{
    ids.value=[];
}
}
const checkOne=()=>{
    if(ids.value.length==data.list.length)
{
    check.value=true;
}
else{
    check.value=false;
}
}
const getlist=()=>{
    axios({
        url:'http://localhost:5130/api/Exams/GetInsList',
        method:'get',
        params:info
    })
    .then(res=>{
        Object.assign(data,res.data);
    })
    .catch(err=>{
        console.log(err);
        
    })
}
const Del=(id:any)=>{
    let f=confirm('确认删除吗');
    if(f){
        axios({
            url:'http://localhost:5130/api/Exams/DelIns',
            method:'delete',
            params:{
                id:id
            }
        })
        .then(res=>{
    if(res.data>0)
{
    alert('删除成功');
    getlist();
}
else{
    alert('删除失败');
    return;
}
})
.catch(err=>{
        console.log(err);
        
    })
    }
}

const StateAll=()=>{
    let f=confirm('确认发布吗');
    if(f){
        axios({
            url:'http://localhost:5130/api/Exams/UpdateState',
            method:'put',
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
    if(res.data>0)
{
    alert('发布成功');
    check.value=false;
    ids.value=[];
    getlist();
}
else{
    alert('发布失败');
    check.value=false;
    ids.value=[];
    return;
}
})
.catch(err=>{
        console.log(err);
        
    })
    }
}

const ExportFn=()=>{
    location.href=`http://localhost:5130/api/Exams/ExportFile?pageIndex=${info.pageIndex}&pageSize=${info.pageSize}`
}
</script>

<style scoped>
input{
    margin: 0 5px;
}
span{
    margin: 0 5px;
}
</style>